<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3-2</title>
    <style type="text/css">
        body{font:12px/1.5 arial;text-align:center;}
        .f-text{width:50px;border:1px solid #ccc ;background:#f0f0f0;font-family:inherit;padding:3px;}
        span{color:green;padding-right:10px;font-weight:700;}
        strong{padding:0 10px;}
    </style>
</head>
<body>
<input class="f-text" type="text" />
<strong>+</strong>
<input class="f-text" type="text" />
<strong>=</strong>
<span>?</span>
<input value="求和" type="button"/>
<script type="text/javascript">
    window.onload = function(){
        var inputs = document.getElementsByTagName("input");
        var span = document.getElementsByTagName("span")[0];
        for(var i=0;i<inputs.length-1;i++){
            inputs[i].onkeyup = function(){
                this.value = this.value.replace(/([^\d])/,"");
            }
        }

        inputs[2].onclick = function(){
            span.innerHTML = parseInt(inputs[0].value) + parseInt(inputs[1].value);
        }
    }
</script>
</body>
</html>